<template>
  <div class="shopOrder">
    <el-card>
      <h3 style="font-weight:400;margin:20px 0">商品订单列表</h3>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.orderSn"
            placeholder="请输入订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.contactInfo"
            placeholder="请输入下单人姓名或者手机号"
            style="width:240px"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="formInline.orderState"
            placeholder="请选择订单状态"
            clearable
          >
            <el-option
              v-for="(item, index) in orderStateList"
              :label="item.stateDec"
              :value="item.orderState"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.payType"
            placeholder="请选择支付方式"
            clearable
          >
            <el-option
              v-for="item in payTypeList"
              :label="item.name"
              :value="item.payType"
              :key="item.payType"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="fitModelId">
          <el-date-picker
            v-model="value1"
            class="work_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
            ref="referenceRef"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSerach">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%;margin:20px 0">
        <el-table-column
          prop="add_time"
          label="下单时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderSn"
          label="订单号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="paySn" label="支付单号" align="center">
        </el-table-column>
        <el-table-column prop="contactName" label="下单人" align="center">
        </el-table-column>
        <el-table-column prop="totalNumber" label="订单商品数量" align="center">
        </el-table-column>
        <el-table-column
          prop="needPayMoney"
          label="订单金额(/元)"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" align="center">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.payType == 1" type="success"
                >支付宝</el-tag
              >
              <el-tag v-if="scoped.row.payType == 2" type="primary"
                >对公账户</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" align="center">
          <template>
            <div>
              {{ orderStateName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="订单备注" align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <div>
              <el-link :underline="false" type="primary" @click="handlerShow()"
                >发货</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                @click="handlershowDialog(1, scoped.row.orderSn)"
                >退款</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                @click="handlershowDialog(2, scoped.row.orderSn)"
                >取消订单</el-link
              >

              <el-link
                :underline="false"
                type="primary"
                @click="handlershowDetial(scoped.row.orderSn)"
                >详情</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                @click="handlershowDialog(3, scoped.row.orderSn)"
                >改价</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="fircount"
          class="management_page"
        ></el-pagination>
      </div>

      <!-- 点击发货 -->
      <el-dialog
        title="订单发货"
        :visible.sync="dialogVisibleDeliver"
        width="45%"
        :before-close="handleCloseDeliver"
      >
        <div style=" margin-left: 80px;">
          <el-form
            :inline="true"
            :model="formInlineDeliver"
            class="demo-form-inline"
          >
            <el-form-item label="物流">
              <el-select
                v-model="formInlineDeliver.region"
                placeholder="请选择物流"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input
                v-model="formInlineDeliver.orderSn"
                placeholder="请输入订单号"
                style="width:300px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3 style="font-weight:400;margin:0 0 20px 80px ">订单信息</h3>
        </div>
        <div class="order_info">
          <div class="order_info_left">
            <div>下单时间:</div>
            <div>订单号:</div>
            <div>配件数量:</div>
            <div>合计金额(元):</div>
            <div>实付金额(元):</div>
            <div>支付单号:</div>
            <div>支付方式:</div>
            <div>转账账户:</div>
            <div>收货人:</div>
            <div>电话号码:</div>
            <div>地址:</div>
          </div>
          <div class="order_info_right">
            <div>2020/01.02</div>

            <div>12194194719471941</div>
            <div>10</div>
            <div>99.00</div>
            <div>88.09</div>
            <div>1281748174814</div>
            <div>支付宝</div>
            <div>快诺优</div>
            <div>张三</div>
            <div>17636244310</div>
            <div>太仓</div>
          </div>
        </div>
        <el-table :data="tableDataDetial" style="width: 100%">
          <el-table-column prop="date" label="配件名" width="180">
          </el-table-column>
          <el-table-column prop="name" label="配件型号" width="180">
          </el-table-column>
          <el-table-column prop="address" label="配件数"> </el-table-column>
          <el-table-column prop="address" label="实付金额(/元)">
          </el-table-column>
          <el-table-column prop="address" label="发货后库存数">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDeliver = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 点击取消订单 -->
      <el-dialog
        :title="dialogName"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
      >
        <div>
          <h3 style="font-weight:400;margin:0 0 20px 80px ">订单信息</h3>
        </div>
        <div class="order_info">
          <div class="order_info_left">
            <div>下单时间:</div>
            <div>订单号:</div>
            <div>配件数量:</div>
            <div>合计金额(元):</div>
            <div>实付金额(元):</div>
            <div>支付单号:</div>
            <div>支付方式:</div>
            <div>转账账户:</div>
            <div>收货人:</div>
            <div>电话号码:</div>
            <div>地址:</div>
          </div>
          <div class="order_info_right">
            <div>{{ orderDetial.add_time }}</div>
            <div>{{ orderDetial.orderSn }}</div>
            <div>{{ orderDetial.totalNum }}</div>
            <div>{{ orderDetial.total }}</div>
            <div>{{ orderDetial.actualPayMoney }}</div>
            <div>{{ orderDetial.paySn }}</div>
            <div>{{ orderDetial.payType == 1 ? "支付宝" : "对公账户" }}</div>
            <div>快诺优</div>
            <div>{{ orderAddress.contactName }}</div>
            <div>{{ orderAddress.contactPhone }}</div>
            <div>{{ orderAddress.contactAddress }}</div>
          </div>
        </div>
        <el-table :data="goodsList" style="width: 100%">
          <el-table-column
            prop="goodsName"
            label="配件名"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fitModelName"
            label="配件型号"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="goodsNumber" label="配件数" align="center">
          </el-table-column>
          <el-table-column prop="subtotal" label="实付金额(/元)" align="center">
          </el-table-column>
          <el-table-column prop="inventory" label="发货后库存数" align="center">
          </el-table-column>
        </el-table>
        <!-- 取消 -->
        <div style="margin:20px 0 20px 500px" v-if="dialogNum == 2">
          共计金额: {{ orderDetial.total }}
        </div>
        <!-- 退款 -->
        <div>
          <div v-if="dialogNum == 1" class="order_tui">
            <div>共计金额: {{ orderDetial.total }}</div>
            <div style="margin-left:40px">
              退款金额:
              <input
                v-model="Tuiprice"
                placeholder="请输入退款金额"
                style="border:none"
              />
            </div>
          </div>
        </div>

        <!-- 改价 -->
        <div>
          <div v-if="dialogNum == 3" class="order_tui">
            <div>共计金额: {{ orderDetial.total }}</div>
            <div style="margin-left:40px">
              改价金额:
              <input
                v-model="price"
                placeholder="请输入改价金额"
                style="border:none"
              />
            </div>
          </div>
        </div>
        <div class="order_so">
          <div>{{ dialogName }}原因</div>

          <div v-if="dialogNum == 1">
            <el-checkbox-group v-model="defaultaddress">
              <el-checkbox
                label="全额退款并取消订单"
                name="type"
                @change="handlercheckDefault"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <el-input type="textarea" v-model="orderbecausre"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerSure">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 点击详情 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleDetial"
        width="60%"
        :before-close="handleCloseDetail"
      >
        <!-- <el-steps :active="active" align-center>
          <el-step title="下单"></el-step>
          <el-step title="付款"></el-step>
          <el-step title="确认订单"></el-step>
          <el-step title="发货"></el-step>
          <el-step title="收货"></el-step>
        </el-steps> -->
        <div class="order_status">
          <h3 style="margin:20px 20px;font-weight:400">订单状态:</h3>
          <div class="order_status_list">
            <div
              class="order_status_right"
              v-for="(item, index) in OrderOperLog"
              :key="index"
            >
              <div>
                <div>{{ item.operDec }}: {{ item.add_time }}</div>
                <div
                  class="order_status_right_list"
                  v-for="subitem in item.operDetail"
                >
                  <div class="order_status_right_list_item">
                    {{ subitem }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="orderInfo">
          <h3 style="margin:20px 20px;font-weight:400">商品信息:</h3>
          <el-table :data="goodsList" style="width: 100%">
            <el-table-column
              prop="date"
              label="配件信息"
              width="340"
              align="center"
            >
              <template slot-scope="scoped">
                <div class="product">
                  <div class="product_inner">
                    <div class="product_left">
                      <img
                        :src="scoped.row.goodsImg"
                        style="width;60px;height:60px"
                        alt=""
                      />
                    </div>
                    <div class="product_right">
                      <div>商品名称:{{ scoped.row.goodsName }}</div>
                      <div>商品型号:{{ scoped.row.fitModelName }}</div>
                      <div>使用设备:{{ scoped.row.deviceModelName }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsPrice"
              label="配件单价"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="goodsNumber" label="购买数量" align="center">
            </el-table-column>
            <el-table-column prop="subtotal" label="小计" align="center">
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDetial = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getMarOrderList,
  getOrderState,
  getOrderOperLog,
  orderDetaile,
  changePrice
} from "../../utils/api";
export default {
  data() {
    return {
      formInline: {
        orderSn: "",
        pageSize: 10,
        pageNumber: 1,
        contactInfo: "",
        orderState: "",
        startTime: "",
        endTime: "",
        payType: ""
      },
      value1: "",
      tableData: [],
      //  发货的弹框
      dialogVisibleDeliver: false,
      //发货的表单
      formInlineDeliver: {
        orderSn: ""
      },
      dialogName: "",
      dialogVisible: false,
      orderbecausre: "",
      dialogNum: "",
      defaultaddress: "",
      price: "",
      dialogVisibleDetial: false,
      active: 1,
      tableDataDetial: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      fircount: 0,
      payTypeList: [
        {
          payType: 1,
          name: "支付宝"
        },
        {
          payType: 2,
          name: "对公账户"
        }
      ],
      orderStateList: [],
      orderStateName: "",
      orderSn: "", //订单号
      OrderOperLog: [],
      goodsList: [],
      orderDetial: "",
      orderAddress: "",
      Tuiprice: ""
    };
  },
  created() {
    this.handlergetMarOrderList();
    this.handlergetOrderState();
  },
  methods: {
    //   获取商城的列表
    handlergetMarOrderList() {
      this.postRequest(getMarOrderList, this.formInline).then(res => {
        if (res.code == 200) {
          this.fircount = res.data.count;
          this.tableData = res.data.list;
          this.tableData.forEach(item => {
            this.orderStateList.forEach(subitem => {
              if (item.orderState == subitem.orderState) {
                this.orderStateName = subitem.stateDec;
              }
            });
          });
        }
      });
    },
    // 获取订单状态
    handlergetOrderState() {
      this.postRequest(getOrderState).then(res => {
        if (res.code == 200) {
          this.orderStateList = res.data;
        }
      });
    },
    // 获取商城订单
    handlergetOrder() {
      this.postRequest(getOrderOperLog, {
        orderSn: this.orderSn
      }).then(res => {
        if (res.code == 200) {
          this.OrderOperLog = res.data;
        }
      });
    },
    // 获取商品的订单详情
    handlergetDetial() {
      this.postRequest(orderDetaile, {
        orderSn: this.orderSn
      }).then(res => {
        if (res.code == 200) {
          this.goodsList = res.data.ordGoods;
          this.orderDetial = res.data.order;
          this.orderAddress = res.data.address;
        }
      });
    },
    // 时间搜索
    changeTime(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.formInline.startTime = "";
        this.formInline.endTime = "";
        this.handlergetMarOrderList();
      } else {
        this.formInline.startTime = value[0];
        this.formInline.endTime = value[1];
        this.handlergetMarOrderList();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetMarOrderList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlergetMarOrderList();
    },
    handlerSerach() {
      this.formInline.pageNumber = 1;
      this.handlergetMarOrderList();
    },
    // 点击发货显示弹框
    handlerShow() {
      this.dialogVisibleDeliver = !this.dialogVisibleDeliver;
    },
    // 点击发货 取消弹框
    handleCloseDeliver() {
      this.dialogVisibleDeliver = false;
    },
    // 点击显示弹框
    handlershowDialog(num, orderSn) {
      this.dialogNum = num;
      switch (num) {
        case 1:
          this.dialogName = "订单退款";
          break;
        case 2:
          this.dialogName = "订单取消";
          break;
        case 3:
          this.dialogName = "订单改价";
          break;
      }
      this.dialogVisible = !this.dialogVisible;
      this.orderSn = orderSn;
      this.handlergetDetial();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 点击详情
    handlershowDetial(orderSn) {
      this.orderSn = orderSn;
      this.dialogVisibleDetial = !this.dialogVisibleDetial;
      this.handlergetOrder();
      this.handlergetDetial();
    },
    handleCloseDetail() {
      this.dialogVisibleDetial = false;
    },
    handlerSure() {
      //订单改价
      if (this.dialogNum == 3) {
        this.handlerSurePrice();
      }
    },
    // 点击确定修改订单价格
    handlerSurePrice() {
      if (this.price == "") {
        return this.$message.error("请输入订单修改价格");
      }

      const params = {
        orderSn: this.orderSn,
        price: this.price,
        remark: this.dialogName
      };
      this.postRequest(changePrice, params).then(res => {
        if (res.code == 200) {
          this.$message.error("订单改价成功");
          this.dialogVisible = false;
          this.price = "";
          this.dialogName = "";
        }
      });
    },
    // 点击确定退款
    handlerSureTui() {
      if (this.Tuiprice == "") {
      }
    }
  }
};
</script>

<style lang="less">
.shopOrder {
  .order_info {
    display: flex;
    flex-direction: row;
    line-height: 40px;
    margin-left: 80px;
    .order_info_left {
    }
    .order_info_right {
      margin-left: 40px;
    }
  }
  .order_tui {
    display: flex;
    flex-direction: row;
    margin: 20px 0;
  }
  .order_so {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin-bottom: 20px;
  }
  .order_status {
    display: flex;
    flex-direction: row;
    .order_status_list {
      display: flex;
      flex-direction: column;
      .order_status_right {
        margin-top: 10px;
        line-height: 40px;
        .order_status_right_list {
          display: flex;
          flex-direction: row;
          .order_status_right_list_item {
            display: flex;
            flex-direction: row;
          }
        }
      }
    }
  }
  .orderInfo {
    display: flex;
    flex-direction: row;
    .orderInfo_right {
    }
    .product {
      .product_inner {
        display: flex;
        flex-direction: row;
        margin: 0 auto;

        .product_left {
          width: 60px;
          height: 60px;
          margin: 0 30px;
        }
        .product_right {
          font-size: 12px;
          text-align: left;
        }
      }
    }
  }
}
</style>
